<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'
//在three.js中只会内置一部分加载器（例如：ObjectLoader） —— 其它的需要在你的应用中单独引入。
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js'
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'
//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
//导入lil.gui可视面板
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
//兼容性检查
import WebGL from 'three/addons/capabilities/WebGL.js';
if (WebGL.isWebGLAvailable()) {
    // alert('浏览器兼容')
    console.log('浏览器兼容');
} else {
    alert('浏览器不兼容')
}

onMounted(() => {//onmounted使得页面模板渲染完成后才执行js代码
    //作业
    const test0 = () => {
        //gui
        let gui = new GUI()
        //文件夹
        let folder1 = gui.addFolder('立方体')
        let folder2 = gui.addFolder('圆锥')
        let folder3 = gui.addFolder('球体')
        //场景
        let scene = new THREE.Scene()
        scene.background = new THREE.Color('rgba(130, 220, 197,1)')

        //坐标辅助
        let axesHelper = new THREE.AxesHelper(10)
        scene.add(axesHelper)

        //相机
        let camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.set(0, 5, 8)
        camera.lookAt(0, 0, 0)


        //渲染器
        let renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)
        document.getElementById('test0').appendChild(renderer.domElement)
        renderer.shadowMap.enabled = true//渲染器启用阴影映射

        //轨道控制器
        let controls = new OrbitControls(camera, renderer.domElement)

        //环境光，均匀分布的光，不会产生阴影
        let ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
        scene.add(ambientLight)

        //平行光、方向光
        let light = new THREE.DirectionalLight(0xffffff, 0.5)
        light.position.set(5, 10, 10)
        light.castShadow = true//启用阴影投射
        scene.add(light)

        //底图网格 (总长宽，分多少个网格，颜色，轴线颜色，和网格颜色 #e6e8ed)
        var gridHelper = new THREE.GridHelper(15, 15, 0x888888, 0x888888);
        gridHelper.position.set(0, 0, 0)
        scene.add(gridHelper);

        //创建底部平面
        let planegeometry = new THREE.PlaneGeometry(15, 15)
        let planematerial = new THREE.MeshPhongMaterial({ color: 'rgba(130, 220, 197,1)' })
        // planematerial.wireframe=true
        let plane = new THREE.Mesh(planegeometry, planematerial)
        plane.rotation.x = -Math.PI / 2;
        plane.receiveShadow = true//启用阴影接受
        scene.add(plane)


        //正方体
        let geometryzft = new THREE.BoxGeometry(2, 2, 2)
        let material = new THREE.MeshPhongMaterial({ color: 'grey' })

        let zft = new THREE.Mesh(geometryzft, material)
        zft.position.set(0, 1, 0)
        zft.castShadow = true//启用阴影投射
        scene.add(zft)

        //gui面板控制立方体位置
        folder1.add(zft.position, 'x').min(-5).max(5).step(1).name('立方体x坐标').onChange((val) => {
            console.log('立方体x:', val);
        })
        folder1.add(zft.position, 'y').min(-5).max(5).step(1).name('立方体y坐标').onChange((val) => {
            console.log('立方体y:', val);
        })
        folder1.add(zft.position, 'z').min(-5).max(5).step(1).name('立方体z坐标').onChange((val) => {
            console.log('立方体z:', val);
        })


        //圆锥
        let ConeGeometry = new THREE.ConeGeometry(1, 2, 64)
        let materialConeGeometry = new THREE.MeshPhongMaterial({ color: '#528d80' })

        let yz = new THREE.Mesh(ConeGeometry, materialConeGeometry)
        yz.position.set(-3, 1, 0)
        yz.castShadow = true
        scene.add(yz)

        //gui面板控制圆锥大小
        folder2.add(yz.scale, 'x').min(-5).max(5).step(1).name('圆锥x大小').onChange((val) => {
            console.log('圆锥x:', val);
        })
        folder2.add(yz.scale, 'y').min(-5).max(5).step(1).name('圆锥y大小').onChange((val) => {
            console.log('圆锥y:', val);
        })
        folder2.add(yz.scale, 'z').min(-5).max(5).step(1).name('圆锥z大小').onChange((val) => {
            console.log('圆锥z:', val);
        })

        //球体
        let SphereGeometry = new THREE.SphereGeometry(1, 64, 32)
        let materialq = new THREE.MeshPhongMaterial({ color: '#a47121' })

        let q = new THREE.Mesh(SphereGeometry, materialq)
        q.position.set(3, 1, 0)
        q.castShadow = true
        scene.add(q)
        //球体材质线框模式 选择框按钮
        folder3.add(materialq, 'wireframe').name('球体线框模式')
        //gui面板改变球体颜色
        folder3.addColor({ color: '#0099ff' }, 'color').name('球体颜色').onChange((val) => {
            materialq.color.set(val)
        })

        const animate = () => {
            controls.update()

            requestAnimationFrame(animate)
            renderer.render(scene, camera)
        }
        animate()
    }
    test0()
    //测试1------------------创建立方体
    const test1 = () => {
        const scene = new THREE.Scene()
        //场景颜色设置
        scene.background = new THREE.Color('rgba(100,100,100,0.5)')

        // 添加坐标轴辅助器
        let axesHelper = new THREE.AxesHelper(10)//10是坐标轴的大小
        //场景中添加坐标辅助器
        scene.add(axesHelper)

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

        const renderer = new THREE.WebGLRenderer()
        //场景的大小由渲染器的大小决定
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)
        //将场景放到指定的div里面
        document.getElementById('test01').appendChild(renderer.domElement)

        //添加轨道控制器，鼠标拖动场景、问题
        let controls = new OrbitControls(camera, renderer.domElement)//加这一句其实就可以了

        //添加gui可视化面板
        const gui = new GUI()
        //改变gui面板的位置
        gui.domElement.position = 'absolute'
        gui.domElement.style.left = '280px'
        //文件夹
        let folder = gui.addFolder('立方体位置')

        //几何
        const geometry = new THREE.BoxGeometry(1, 1, 1)//几何体的长宽高大小
        //材质
        const material = new THREE.MeshBasicMaterial({ color: 0x0099ff })//立方体的颜色

        //创建立方体
        const cube = new THREE.Mesh(geometry, material)//将几何体和材质放在网格上

        //立方体的位置
        cube.position.set(0, 0, 0)

        //gui面板控制立方体位置
        folder.add(cube.position, 'x').min(-5).max(5).step(1).name('立方体x坐标').onChange((val) => {
            console.log('立方体x:', val);
        })
        folder.add(cube.position, 'y').min(-5).max(5).step(1).name('立方体y坐标').onChange((val) => {
            console.log('立方体y:', val);
        })
        folder.add(cube.position, 'z').min(-5).max(5).step(1).name('立方体z坐标').onChange((val) => {
            console.log('立方体z:', val);
        })

        //立方体的材质设置线框模式
        material.wireframe = true

        //打开或者关闭立方体的线框模式
        gui.add(material, 'wireframe').name('立方体线框模式')

        //创建一个子立方体
        let childmaterials = new THREE.MeshBasicMaterial({ color: 'rgba(148, 222, 94,0.1)' })
        let childgeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5)

        let childcube = new THREE.Mesh(childgeometry, childmaterials)

        //gui改变子立方体颜色
        gui.addColor({ color: '#00ff00' }, 'color').name('子立方体颜色').onChange((val) => {
            childcube.material.color.set(val)
        })


        //将子立方体添加到cube父亲立方体中
        cube.add(childcube)

        //创建一个球体
        //材质
        let ballmaterial = new THREE.MeshBasicMaterial({ color: '#fff000' })
        //缓冲几何体
        let ballgeometry = new THREE.SphereGeometry(15, 32, 16)
        //形成一个球体
        let ball = new THREE.Mesh(ballgeometry, ballmaterial)
        //改变球体大小,按比例放大缩小
        ball.scale.set(0.07, 0.07, 0.07)
        //球体材质设置线框模式
        ballmaterial.wireframe = true

        //gui面板创建球体文件夹
        let ballfolder = gui.addFolder('球体')

        //gui面板控制球体位置
        ballfolder.add(ball.position, 'x').min(-5).max(5).step(1).name('球体x坐标').onChange((val) => {
            console.log('球体x:', val);
        })
        ballfolder.add(ball.position, 'y').min(-5).max(5).step(1).name('球体y坐标').onChange((val) => {
            console.log('球体y:', val);
        })
        ballfolder.add(ball.position, 'z').min(-5).max(5).step(1).name('球体z坐标').onChange((val) => {
            console.log('球体z:', val);
        })
        //球体材质线框模式 选择框按钮
        ballfolder.add(ballmaterial, 'wireframe').name('球体线框模式')
        //gui面板改变球体颜色
        ballfolder.addColor({ color: '#0099ff' }, 'color').name('球体颜色').onChange((val) => {
            ball.material.color.set(val)
        })

        //将立方体cube作为球体ball的子元素，需要注释掉下面的scene.add(cube)一行才能生效
        // ball.add(cube)

        //将球体添加到场景
        scene.add(ball)


        //当我们调用 scene.add() 的时候，物体将会被添加到 (0,0,0) 坐标
        scene.add(cube)

        //但将使得摄像机和立方体彼此在一起，我们只需要将摄像机稍微向外移动一些即可
        camera.position.set(0, 0, 3)
        camera.lookAt(0, 0, 0)

        const animate = () => {
            requestAnimationFrame(animate)

            //使立方体动起来
            // cube.rotation.x += 0.01
            // cube.rotation.y += 0.01

            //渲染场景和相机
            renderer.render(scene, camera)
        }
        animate()

    }
    test1()

    //测试2----------------------------创建一根线
    const test2 = () => {
        //场景
        let scene = new THREE.Scene()
        //场景颜色
        scene.background = new THREE.Color('rgba(100,100,100,0.5)')

        //添加坐标轴辅助器
        let axesHelper = new THREE.AxesHelper(50)
        //场景中添加坐标辅助器
        scene.add(axesHelper)

        //相机
        let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500)
        camera.position.set(0, 0, 100)
        camera.lookAt(0, 0, 0)

        //渲染器
        let renderer = new THREE.WebGLRenderer()
        //渲染器的大小即场景的大小
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)
        //场景加入到div
        document.getElementById('test02').appendChild(renderer.domElement)

        //添加轨道控制器，鼠标控制问题拖动
        let controls = new OrbitControls(camera, renderer.domElement)

        // 定义好材质
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff })//颜色白色

        // 需要一个带有一些顶点的geometry（几何体）
        const points = []
        points.push(new THREE.Vector3(-10, 0, 0))
        points.push(new THREE.Vector3(0, 10, 0))
        points.push(new THREE.Vector3(10, 0, 0))

        // 创建几何体,把点连成线，从第一个点开始连到最后一个
        const geometry = new THREE.BufferGeometry().setFromPoints(points)

        //创建一个线
        const line = new THREE.Line(geometry, material)

        //线加入到场景
        scene.add(line)

        //创建一个面
        //材质
        let planematerial = new THREE.MeshBasicMaterial({ color: 0x0099ff })

        const points2 = []
        points2.push(new THREE.Vector3(0, 0, 0))
        points2.push(new THREE.Vector3(2, 0, 0))
        points2.push(new THREE.Vector3(2, 2, 0))
        // 任何问题都是三角形组成，想创建正方形就要创建2个三角形
        const points3 = []
        points3.push(new THREE.Vector3(0, 0, 0))
        points3.push(new THREE.Vector3(2, 2, 0))
        points3.push(new THREE.Vector3(0, 2, 0))

        //创建一个几何体,由点连线而成
        let geometry1 = new THREE.BufferGeometry().setFromPoints(points2)

        //创建另一个面几何体
        let geometry2 = new THREE.BufferGeometry().setFromPoints(points3)

        //创建三角形面1
        let plane1 = new THREE.Mesh(geometry1, planematerial)
        //创建三角形面2
        let plane2 = new THREE.Mesh(geometry2, planematerial)

        //设置网格材质
        // plane2.material.wireframe = true

        //给plane1三角形面贴图
        let textureloader = new THREE.TextureLoader()

        let texture = textureloader.load('../src/assets/maps/jisoo.jpeg')
        //把贴图添加到材质上
        plane1.material.map = texture
        plane2.material.map = texture


        //创建正方体
        //几何体：立方体
        let geometry3 = new THREE.BoxGeometry(1, 1, 1)
        //材质
        let material3 = new THREE.MeshBasicMaterial({ color: 0xffffff })

        //创建正方体
        let cube = new THREE.Mesh(geometry3, material3)

        //正方体的位置
        cube.position.set(0, 0, 0)

        //给正方体贴图
        let textureLoader2 = new THREE.TextureLoader()
        //加载纹理
        let texture2 = textureLoader2.load('../src/assets/maps/jisoo.jpeg')

        // 贴图应用到正方体的材质上
        material3.map = texture2

        //将所有的三角形面作为这个正方体的子元素，方便控制
        cube.add(plane1, plane2)

        //添加到场景
        scene.add(cube)


        //添加灯光
        let ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
        scene.add(ambientLight)

        const animate = () => {
            controls.update()

            requestAnimationFrame(animate)//加上这句，轨道控制器才能起作用

            //渲染场景、相机
            renderer.render(scene, camera)
        }
        animate()

    }
    test2()
    //测试3--------------------------模型引入、使用gltf或者glb模型

    const test3 = () => {
        //创建场景
        let scene = new THREE.Scene()
        scene.background = new THREE.Color('rgba(100,100,100,0.1)')

        //添加坐标辅助器
        let axesHelper = new THREE.AxesHelper(50)
        //场景中添加坐标辅助器
        scene.add(axesHelper)

        //创建相机
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.set(0, 0, 100)
        camera.lookAt(0, 0, 0)

        //创建渲染器
        let renderer = new THREE.WebGL1Renderer()
        //场景大小
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)
        //场景加入div里面
        document.getElementById('test03').appendChild(renderer.domElement)

        //添加轨道控制器，鼠标控制问题，改变视野
        const controls = new OrbitControls(camera, renderer.domElement);

        //加载模型(需要导入GLTFLoader，这个不是three内置的，THREE.ObjectLoader()才是three内置的)
        const loader = new GLTFLoader()
        //../src/assets/model/cup_3.glb 也可以的
        loader.load('../src/assets/model/tree_2.gltf', function (gltf) {
            //调整模型的大小，放大缩小比例，宽、高、厚三个维度放大缩小
            gltf.scene.scale.set(10, 10, 10)
            //调整模型位置,水平、上下方向、前后方向
            gltf.scene.position.set(0, -40, 0)

            //添加灯光,不然物体一片黑
            let ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
            scene.add(ambientLight)

            //场景中添加模型
            scene.add(gltf.scene)

        }, undefined, function (err) {
            console.log(err);
        })

        const animate = () => {
            //轨道控制器更新
            controls.update()

            requestAnimationFrame(animate)

            //渲染场景,渲染一定要放到最后
            renderer.render(scene, camera)
        }
        animate()
    }
    test3()

    //测试4---------------------------json对象模型使用
    const test4 = () => {
        //创建场景
        let scene = new THREE.Scene()
        scene.background = new THREE.Color('rgba(100,100,100,0.5)')

        //添加坐标控制器
        let axesHelper = new THREE.AxesHelper(50)
        //场景添加坐标辅助控制器
        scene.add(axesHelper)

        //创建相机
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        //设置相机的位置
        camera.position.set(20, 20, 20)
        camera.lookAt(0, 0, 0)

        //创建渲染器
        let renderer = new THREE.WebGL1Renderer()
        //设置场景大小
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)

        //场景添加到div里面
        document.getElementById('test04').appendChild(renderer.domElement)

        //添加轨道控制器
        let controls2 = new OrbitControls(camera, renderer.domElement)

        //加载json对象模型
        let loader = new THREE.ObjectLoader()
        loader.load('../src/assets/scene.json', function (obj) {

            scene.add(obj)
        })

        const animate = () => {
            controls2.update()

            requestAnimationFrame(animate)
            //渲染场景、相机
            renderer.render(scene, camera)
        }
        animate()
    }
    test4()

    //测试5---------------------------obj 3dmax对象模型使用
    const test5 = () => {
        //场景
        let scene = new THREE.Scene()
        scene.background = new THREE.Color('rgba(100,100,100,0.5)')

        //坐标辅助器
        let axesHelper = new THREE.AxesHelper(100)
        scene.add(axesHelper)

        //相机
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        //相机的位置
        camera.position.set(100, 100, 100)
        camera.lookAt(0, 0, 0)

        //渲染器
        let renderer = new THREE.WebGL1Renderer()
        //场景大小
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)

        //场景添加到div
        document.getElementById('test05').appendChild(renderer.domElement)

        //轨道控制器
        let controls = new OrbitControls(camera, renderer.domElement)

        //加载3d max 对象模型
        let objLoader = new OBJLoader()
        let mtlLoader = new MTLLoader()

        //加载模型文件
        mtlLoader.load('../src/assets/3dmaxtest.mtl', function (materials) {
            materials.preload()

            objLoader.setMaterials(materials)

            objLoader.load('../src/assets/3dmaxtest.obj', function (obj) {
                //添加灯光，不然物体一片黑
                let ambientLight = new THREE.AmbientLight(0xffffff, 0.5)//白色的灯光
                scene.add(ambientLight)

                //模型添加到场景
                scene.add(obj)
            })
        })

        const animate = () => {
            // controls.update()
            requestAnimationFrame(animate)

            //渲染场景
            renderer.render(scene, camera)
        }
        animate()
    }
    test5()
    //测试6-----------------------------贴图加载
    const test6 = () => {

        //场景
        let scene = new THREE.Scene()
        //场景颜色
        scene.background = new THREE.Color("rgba(100,100,100,0.1)")

        //坐标轴辅助器
        let axesHelper = new THREE.AxesHelper(50)
        scene.add(axesHelper)

        //相机
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.set(0, 0, 5)
        camera.lookAt(0, 0, 0)

        //渲染器
        let renderer = new THREE.WebGL1Renderer()
        //场景大小设置
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)

        //场景添加到div中
        document.getElementById('test06').appendChild(renderer.domElement)

        //轨道控制器
        let controls = new OrbitControls(camera, renderer.domElement)
        //改变轨道控制器围绕哪一个点旋转
        // controls.target.set(3, 3, -5)

        //创建一个平面
        //基础网格材质
        let planematerial = new THREE.MeshBasicMaterial({ color: '0xfff000' })
        //平面几何体
        let planegeometry = new THREE.PlaneGeometry(4, 4, 4)//宽，高，细分多少个矩形面
        //创建平面
        let plane = new THREE.Mesh(planegeometry, planematerial)

        //平面设置线框模式
        planematerial.wireframe = true

        //设置平面为双面
        planematerial.side = THREE.DoubleSide

        //使用gui面板
        let gui = new GUI()

        //改变gui面板的位置
        gui.domElement.position = 'absolute'
        gui.domElement.style.left = '0'

        //创建平面gui面板文件夹
        let planefolder = gui.addFolder('平面')

        //是否线框模式选择框
        planefolder.add(planematerial, 'wireframe').name('平面线框模式')

        //平面颜色选择框
        planefolder.addColor({ color: '#0099ff' }, 'color').name('平面颜色').onChange((val) => {
            planematerial.color.set(val)
        })

        //平面的位置选择框
        planefolder.add(plane.position, 'x').min(-5).max(5).step(1).name('平面的x').onChange((val) => {
            console.log('平面的x:', val);
        })
        planefolder.add(plane.position, 'y').min(-5).max(5).step(1).name('平面的y').onChange((val) => {
            console.log('平面的y:', val);
        })
        planefolder.add(plane.position, 'z').min(-5).max(5).step(1).name('平面的z').onChange((val) => {
            console.log('平面的z:', val);
        })

        //加载管理器,目的先请求材质图片，再进行其他的，防止看不见图片就代码执行到下面的了
        let loadManager = new THREE.LoadingManager()
        //这个一定要写在前面，不然不生效
        loadManager.onProgress = (url, loaded, total) => {
            //url是每一个url地址
            console.log('url:', url);
            // loaded是每一个url加载完成的量
            console.log('加载完成百分比:', loaded / total);
        }
        //贴图使用
        //创建纹理加载器
        let textureLoader = new THREE.TextureLoader(loadManager)

        //加载纹理
        let texture = textureLoader.load('../src/assets/maps/jisoo.jpeg')

        //保持贴图的颜色
        texture.colorSpace = THREE.SRGBColorSpace

        //把贴图贴到平面的材质中
        plane.material.map = texture


        //平面加入到创建中
        scene.add(plane)

        //创建球体
        let geometry = new THREE.SphereGeometry(2, 64, 64)
        let material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.DoubleSide })//设置双面
        let sphere = new THREE.Mesh(geometry, material)
        scene.add(sphere)

        //创建立方体,不同的面用不同的材质，不同的纹理图片，如果材质数量不够，将出现有的面空白
        let geometry2 = new THREE.BoxGeometry(4, 4, 4)
        let material2 = [
            new THREE.MeshBasicMaterial({ map: textureLoader.load('../src/assets/maps/jisoo.jpeg') }),
            new THREE.MeshBasicMaterial({ map: textureLoader.load('../src/assets/maps/clock.jpg') }),
            new THREE.MeshBasicMaterial({ map: textureLoader.load('https://lovelylee.asia:3000/public/1.jpg') }),
            new THREE.MeshBasicMaterial({ map: textureLoader.load('https://lovelylee.asia:3000/public/2.jpg') }),
            new THREE.MeshBasicMaterial({ map: textureLoader.load('https://lovelylee.asia:3000/public/3.jpg') }),
            new THREE.MeshBasicMaterial({ map: textureLoader.load('https://lovelylee.asia:3000/public/4.jpg') }),

        ]



        //使用加载器，图片请求完成再执行创建物体，添加到场景中
        loadManager.onLoad = () => {
            let lifangbox = new THREE.Mesh(geometry2, material2)
            scene.add(lifangbox)
        }


        //动画
        const animate = () => {
            controls.update()
            requestAnimationFrame(animate)


            //渲染场景
            renderer.render(scene, camera)
        }
        animate()


    }
    test6()
    //test7----------------------------监听窗口大小变化-太阳系
    const test7 = () => {
        //创建场景
        const scene = new THREE.Scene()
        //场景背景颜色
        scene.background = new THREE.Color('rgba(100, 100, 100, 0.5)')

        //坐标辅助器
        const axesHelper = new THREE.AxesHelper(10)
        // scene.add(axesHelper)

        //相机：视野75角度，画面宽高比，近平面，远平面，物体在远近之间才能看见
        const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 100)//一定在远近平面之间才能看见

        //相机的位置
        camera.position.set(0, 5, 0)//相机的位置
        camera.lookAt(0, 0, 0)//设置camera看向的位置
        // camera.up.set(3, 0, 0)//来决定结果的朝向

        //渲染器
        const renderer = new THREE.WebGLRenderer()

        //场景的大小由渲染器大小决定
        renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)

        //场景添加到指定的div
        document.getElementById('test07').appendChild(renderer.domElement)

        //添加轨道控制器,必须在添加到div的后面
        const controls = new OrbitControls(camera, renderer.domElement)

        //创建物体
        //材质
        // const material = new THREE.MeshBasicMaterial({ color: "#0099ff" })//这种材质不受灯光影响
        const material = new THREE.MeshPhongMaterial({ color: "#0099ff" })//这种材质受灯光影响
        //几何体
        const geometry = new THREE.BoxGeometry(2, 2, 2)
        //创建物体立方体
        const cube = new THREE.Mesh(geometry, material)
        //立方体添加到场景
        // scene.add(cube)

        //修改材质,改为线框模式
        material.wireframe = true

        //创建光
        const light = new THREE.DirectionalLight(0xffffff, 3)
        light.position.set(5, 5, 5)

        scene.add(light)

        // 创建太阳系
        const solarSystem = new THREE.Object3D();//空的节点
        scene.add(solarSystem);


        //创建太阳
        const geometry2 = new THREE.SphereGeometry(1, 64, 32);
        const material2 = new THREE.MeshPhongMaterial({ color: 'yellow' });
        const sun = new THREE.Mesh(geometry2, material2);
        solarSystem.add(sun);
        const sunAxesHelper = new THREE.AxesHelper(10)//参数为坐标的长度
        sunAxesHelper.material.depthTest = false//设置，如果坐标轴被物体遮住了也要显示
        sun.add(sunAxesHelper)


        //创建地球
        const geometry3 = new THREE.SphereGeometry(1, 64, 32);
        const material3 = new THREE.MeshPhongMaterial({ color: 'blue' });
        const earth = new THREE.Mesh(geometry3, material3);
        earth.position.x = 3
        earth.scale.set(0.5, 0.5, 0.5)
        solarSystem.add(earth);
        const earthAxesHelper = new THREE.AxesHelper(5)
        earthAxesHelper.material.depthTest = false
        earth.add(earthAxesHelper)

        //地球作为太阳的子节点
        sun.add(earth)

        //创建月球
        const geometry4 = new THREE.SphereGeometry(1, 64, 32)
        const material4 = new THREE.MeshPhongMaterial({ color: 'grey' })
        const moon = new THREE.Mesh(geometry4, material4)

        moon.position.x = 2//这个距离是相对于父元素地球的位置，而不是相当于原点了
        moon.scale.set(0.25, 0.25, 0.25)
        solarSystem.add(moon)
        const moonAxesHelper = new THREE.AxesHelper(5)
        moon.add(moonAxesHelper)

        earth.add(moon)



        //动画
        const animate = () => {
            controls.update()
            requestAnimationFrame(animate)

            //旋转

            // cube.rotation.y += 0.01


            sun.rotation.y += 0.01


            // earth.rotation.x += 0.01
            earth.rotation.y += 0.01
            // earth.rotation.z += 0.01

            moon.rotation.y += 0.01

            //渲染器添加场景和相机
            renderer.render(scene, camera)
        }

        animate()
        //监听浏览器窗口大小变化
        window.addEventListener('resize', () => {
            //渲染器重置大小
            renderer.setSize(window.innerWidth / 1.05, window.innerHeight / 1.08)
            //相机宽高比更新
            camera.aspect = window.innerWidth / window.innerHeight
            //更新矩阵
            // renderer.updateProjectionMatrix()
        })
    }
    test7()


})


// 异步函数测试
const test77 = async () => {
    let issuccess = 1
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (issuccess == 0) {
                resolve({ statu: 0, msg: '第二句' })
            } else {
                reject({ statu: 1, msg: '第二句请求失败' })
            }
        }, 2000)
    })
}
const test88 = async () => {
    console.log('第一句');
    try {
        let er = await test77()
        console.log('er:', er);//等待第二句这个耗时操作，然后才输出第三句  
    } catch (error) {
        console.log('等待失败error:', error);//error是失败情况返回的结果，即对象：{statu: 1, msg: '第二句请求失败'}
        return  //一般情况下，失败了就不想去执行后面的代码，就不想输出第三句了，就可以结束这个函数内部后续的代码了
        //如果不写return，那么第三句还会输出的
    }

    console.log('第三句');//如果请求失败就不能输出这句话了

}
test88()
</script>
<template>
    <!-- three.js作业 -->
    <div id="test0">
        李向阳-3212012423-three.js作业
    </div>
    <!-- 第一个测试-立方体 -->
    <div id="test01">
        第一个测试-立方体
    </div>

    <!-- 第二个测试-线 -->
    <div id="test02">
        第二个测试-线
    </div>

    <!-- 第三个测试-gltf和glb模型使用 -->
    <div id="test03">
        第三个测试-gltf和glb模型使用
    </div>

    <!-- 第四个测试-json对象模型使用 -->
    <div id="test04">
        第4个测试-json对象模型使用
    </div>
    <!-- 第5个测试-obj 3d max对象模型使用 -->
    <div id="test05">
        第5个测试-obj 3d max对象模型使用
    </div>
    <!-- 第6个测试-贴图 -->
    <div id="test06">
        第6个测试-贴图
    </div>
    <!-- 第7个测试-太阳系 -->
    <div id="test07">
        第7个测试-太阳系
    </div>
</template>
<style lang="scss" scoped>
#test0 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test01 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test02 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test03 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test04 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test05 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test06 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}

#test07 {
    text-align: center;
    width: 95vw;
    height: 94vh;
    margin: auto;
    border: 1px solid red;
    margin-top: 0.1vh;
    padding: 0.8%;
}
</style>